<template>
  <n-layout>
    <n-layout-header bordered class="header">
      <div class="header-content">
        <!-- Logo 区域 -->
        <div class="logo-section">
          <n-space align="center">
            <n-avatar
              round
              size="small"
              src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
            />
            <h2 class="logo-text">Tech Portal</h2>
          </n-space>
        </div>
        
        <!-- 桌面端菜单 -->
        <div class="nav-menu desktop-menu" v-if="!isMobile">
          <n-menu
            mode="horizontal"
            :options="menuOptions"
            :value="activeMenu"
            @update:value="handleMenuSelect"
          />
        </div>
        
        <!-- 移动端菜单 -->
        <div class="mobile-menu" v-else>
          <n-popover
            trigger="click"
            placement="bottom"
            :show-arrow="false"
            :style="{ padding: 0 }"
          >
            <template #trigger>
              <n-button quaternary circle size="large">
                <template #icon>
                  <n-icon size="20">
                    <menu-outline />
                  </n-icon>
                </template>
              </n-button>
            </template>
            <div class="mobile-menu-content">
              <n-menu
                :indent="12"
                :options="menuOptions"
                :value="activeMenu"
                @update:value="handleMenuSelect"
              />
            </div>
          </n-popover>
        </div>

        <!-- 用户区域 -->
        <div class="user-section">
          <n-space align="center" :size="16">
            <n-button
              v-if="!isLoggedIn"
              @click="showLoginDialog = true"
              type="primary"
              :ghost="isMobile"
              :circle="isMobile"
            >
              <template v-if="isMobile">
                <n-icon><person-outline /></n-icon>
              </template>
              <template v-else>
                <span>登录</span>
              </template>
            </n-button>
            <n-dropdown v-else :options="userOptions" @select="handleSelect" trigger="click">
              <div class="user-avatar">
                <n-badge :dot="hasNotification">
                  <n-avatar
                    round
                    :size="32"
                    :src="userAvatar"
                    fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                  />
                </n-badge>
                <span class="username" v-if="!isMobile">{{ username }}</span>
                <n-icon class="dropdown-icon" v-if="!isMobile">
                  <chevron-down-outline />
                </n-icon>
              </div>
            </n-dropdown>
          </n-space>
        </div>
      </div>
    </n-layout-header>

    <n-layout-content>
      <router-view></router-view>
    </n-layout-content>

    <!-- <n-layout-footer bordered>
      <div class="footer-content">
        <p>&copy; 2024 Tech Portal. All rights reserved.</p>
      </div>
    </n-layout-footer> -->

    <login-dialog v-model:show="showLoginDialog" />
  </n-layout>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { MenuOption } from 'naive-ui'
import LoginDialog from '@/components/LoginDialog.vue'
import { useRouter, useRoute } from 'vue-router'
import { useMessage } from 'naive-ui'
import {
  MenuOutline,
  PersonOutline,
  ChevronDownOutline
} from '@vicons/ionicons5'

const router = useRouter()
const route = useRoute()
const message = useMessage()

const isLoggedIn = ref(false)
const userInitials = ref('A')
const showLoginDialog = ref(false)
const username = ref('')
const userAvatar = ref(localStorage.getItem('userAvatar') || 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg')
const isMobile = ref(false)
const hasNotification = ref(true)

// 当前激活的菜单项
const activeMenu = computed(() => {
  const path = route.path
  if (path === '/') return 'home'
  if (path.startsWith('/docs')) return 'docs'
  return ''
})

// 菜单选项
const menuOptions: MenuOption[] = [
  {
    label: '首页',
    key: 'home',
  },
  {
    label: '文档',
    key: 'docs',
  }
]

const userOptions = [
  {
    label: '个人中心',
    key: 'profile'
  },
  {
    label: '消息通知',
    key: 'notifications'
  },
  {
    type: 'divider'
  },
  {
    label: '退出登录',
    key: 'logout'
  }
]

// 处理菜单选择
const handleMenuSelect = (key: string) => {
  switch (key) {
    case 'home':
      router.push('/')
      break
    case 'docs':
      router.push('/docs')
      break
  }
}

// 检查屏幕尺寸
const checkScreenSize = () => {
  isMobile.value = window.innerWidth <= 768
}

// 检查登录状态
const checkLoginStatus = () => {
  const loginStatus = localStorage.getItem('isLoggedIn')
  const storedUsername = localStorage.getItem('username')
  const storedAvatar = localStorage.getItem('userAvatar')
  
  if (loginStatus === 'true' && storedUsername) {
    isLoggedIn.value = true
    username.value = storedUsername
    userInitials.value = storedUsername.charAt(0).toUpperCase()
    userAvatar.value = storedAvatar || 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
  }
}

// 处理下拉菜单选择
const handleSelect = (key: string) => {
  switch (key) {
    case 'logout':
      handleLogout()
      break
    case 'profile':
      router.push('/profile')
      break
    case 'notifications':
      hasNotification.value = false
      message.info('消息功能开发中')
      break
  }
}

// 处理退出登录
const handleLogout = () => {
  localStorage.removeItem('isLoggedIn')
  localStorage.removeItem('username')
  isLoggedIn.value = false
  username.value = ''
  userInitials.value = 'U'
  message.success('已退出登录')
  router.push('/')
}

// 监听登录成功事件
const handleLoginSuccess = () => {
  checkLoginStatus()
}

onMounted(() => {
  checkLoginStatus()
  checkScreenSize()
  window.addEventListener('login-success', handleLoginSuccess)
  window.addEventListener('resize', checkScreenSize)
})

onUnmounted(() => {
  window.removeEventListener('login-success', handleLoginSuccess)
  window.removeEventListener('resize', checkScreenSize)
})
</script>

<style scoped>
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
  backdrop-filter: blur(8px);
}

.header-content {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: 1200px;
  margin: 0 auto;
}

.logo-section {
  flex-shrink: 0;
  min-width: 160px;
}

.logo-text {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  background: linear-gradient(45deg, #18a058, #2080f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-menu {
  flex: 1;
  display: flex;
  justify-content: center;
  margin: 0 20px;
}

.mobile-menu {
  margin: 0 12px;
}

.mobile-menu-content {
  min-width: 200px;
}

.user-section {
  flex-shrink: 0;
  min-width: 100px;
  display: flex;
  justify-content: flex-end;
}

.user-avatar {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 16px;
  transition: background-color 0.3s;
}

.user-avatar:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.username {
  margin: 0 4px 0 8px;
  font-size: 14px;
  color: var(--n-text-color);
}

.dropdown-icon {
  font-size: 16px;
  color: var(--n-text-color-3);
}

.footer-content {
  text-align: center;
  padding: 20px;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .header-content {
    padding: 0 12px;
  }

  .logo-text {
    font-size: 1.1rem;
  }

  .desktop-menu {
    display: none;
  }

  .user-section {
    min-width: auto;
  }
}

@media (min-width: 769px) {
  .mobile-menu {
    display: none;
  }
}
</style> 